<style scoped>
#page-login {
    height: 100vh;
    display: flex;
    background-color: pink;
}

.login-wrapper {
    width: 800px;
    margin: auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.left-picture {
    display: flex;
    align-items: center;
    border-right: dashed 1px #ccc;
}

.logo-icon {
    width: 300px;
    height: 300px;
    margin: auto;
    fill: #999999;
}

.login-form {
    width: 350px;
    padding: 50px;
}

.title {
    text-align: center;
    margin-bottom: 40px;
}

.input-item {
    margin-bottom: 30px;
}

.forget-tips {
    text-align: center;
}

.reset-link {
    text-decoration: none;
    color: #999999;
}

.input-code-item {
    position: relative;
}

.btn-send {
    margin-left: 10px;
}
</style>
<template>
    <div id="page-login">
        <div class="login-wrapper d-flex">
            <div class="flex-1 left-picture">
                <svg class="logo-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000">
                    <path
                        d="M549.766 97.925c19.974 4.609 50.703 35.339 62.995 55.312 35.339-13.828 36.875 41.484 46.094 55.312 23.047-16.901 46.094-35.339 46.094-55.312 0-21.51-30.729-35.339-30.729-41.484 0-12.292 38.411-12.292 41.484-12.292 50.703 0 106.016 39.948 106.016 96.797 0 27.656-9.219 41.484-33.802 70.677h32.266c21.51 0 27.656-3.073 55.312 7.682C923.125 294.591 960 348.367 960 389.852c0 3.073 0 9.219-1.536 13.828-4.609 3.073-12.292 3.073-16.901 4.609-15.365 1.536-32.266 6.146-47.63 7.682-47.63 0-50.703 0-53.776-1.536-1.536 1.536-1.536 0-1.536 4.609 0 3.073 7.682 44.557 10.755 67.604 9.219 56.849 12.292 115.234 19.974 173.62 1.536 7.682 7.682 15.365 9.219 23.047 3.073 13.828 6.146 27.656 6.146 39.948 0 153.646-245.833 208.958-321.119 208.958h-86.042c-115.234-9.219-248.906-52.24-301.145-138.281-4.609-7.682-18.437-39.948-18.437-50.703v-36.875c3.073-16.901 7.682-33.802 21.51-50.703v-84.505l12.292-132.135c-12.292 1.536-33.802 1.536-38.411 1.536-21.51 0-38.411-3.073-61.458-6.146-7.682-1.536-18.437-3.073-24.583-6.146-4.609-1.536-3.073-12.292-3.073-13.828 0-44.557 44.557-107.552 98.333-119.844 4.609-1.536 13.828-1.536 19.974-3.073l41.484-1.536c-13.828-10.755-36.875-46.094-36.875-59.922v-29.193c13.828-58.385 62.995-82.969 106.016-82.969 1.536 0 41.484 0 41.484 12.292 0 6.146-30.729 19.974-30.729 41.484 0 1.536 6.146 32.266 16.901 32.266 3.073 0-1.536-3.073 3.073-3.073 3.073 0 32.266 10.755 36.875 10.755h12.292l3.073-3.073c-19.974-16.901-30.729-36.875-36.875-53.776 12.292 7.682 18.438 9.219 29.193 9.219 27.656 0 46.094-15.365 78.359-29.193 24.583-10.755 52.24-13.828 78.359-18.437-12.292-9.219-24.583-16.901-36.875-23.047l38.411-1.536c7.68 1.537 15.362 4.61 23.044 6.146z"
                    ></path>
                </svg>
            </div>
            <div class="login-form">
                <h1 class="title">天牛网盘</h1>
                <el-form
                    ref="form"
                    :model="regForm"
                    :rules="rules"
                    status-icon
                    size="large"
                    @keyup.enter="submitForm"
                >
                    <el-form-item label="" prop="nickname" class="input-item">
                        <el-input v-model="regForm.nickname" placeholder="输入昵称" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="" prop="email" class="input-item">
                        <el-input v-model="regForm.email" placeholder="输入邮箱" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="" prop="account" class="input-item">
                        <el-input v-model="regForm.account" placeholder="输入用户名" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="" prop="password" class="input-item">
                        <el-input v-model="regForm.password" placeholder="输入登录密码" type="password" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="" prop="password2" class="input-item">
                        <el-input v-model="regForm.password2" placeholder="再次输入登录密码" type="password"
                                  autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="" prop="code" class="input-item input-code-item">
                        <div style="display: flex;width: 100%">
                            <div style="flex:1">
                                <el-input v-model="regForm.code" placeholder="验证码" autocomplete="off"/>
                            </div>
                            <el-button :loading="sendCodeData.sending" :disabled="sendCodeData.countdown > 0" class="btn-send" @click="sendCode">
                                {{ sendCodeData.countdown == 0 ? '发送验证码' : ('剩余' + sendCodeData.countdown + '秒') }}
                            </el-button>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loginLoading" style="width: 100%" type="primary" @click="submitForm">立即注册
                        </el-button>
                    </el-form-item>
                    <div class="forget-tips" style="overflow:hidden;">
                        <router-link class="reset-link" replace to="/login">返回登录</router-link>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import {defineComponent, onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from 'vue-router'
import {useStore} from "vuex";
import api from "../service/api";

export default defineComponent({
    name: 'Reg',
    setup() {
        /**
         *
         * @type {Ref<FormInstance>}
         */
        const form = ref(null);
        // 使用reactive将对象转换成响应对象
        const regForm = reactive({
            password: '',
            account: '',
            nickname: '',
            email: '',
            password2: '',
            code: ''
        })


        const checkPassword = (rule, value, callback) => {
            if (!value) callback(Error('请填写密码')) // 验证不通过
            else callback() // 验证通过
        }
        const emailValidator = (rule, value, callback) => {
            if (!value) callback(Error('邮箱不允许为空'))
            else if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value)) callback(Error('邮箱格式不正确'))
            else {
                api.user.checkEmail(value).then(b => {
                    if (b) callback()
                    else callback(Error('邮箱已被占用,请换一个'))
                })
            }
        };
        const checkPassword2 = (rule, value, callback) => {
            if (!value) callback(Error('请填写密码')) // 验证不通过
            else if (value != regForm.password) callback(Error('密码不一致')) // 验证不通过
            else callback() // 验证通过
        }
        const rules = reactive({
            account: [
                {required: true, message: '请填写用户名称', trigger: 'blur'}
            ],
            password: [
                {validator: checkPassword, trigger: 'blur'}
            ],
            password2: [
                {validator: checkPassword2, trigger: 'blur'}
            ],
            email: [
                {validator: emailValidator, trigger: 'blur'}
            ]
        })
        const router = useRouter(); // 获取路由对象
        const store = useStore();
        const regLoading = ref(false)
        const submitForm = () => {
            if (regLoading.value) return;
            // 验证表单
            form.value.validate(async (isValid) => {
                if (isValid) {
                    // 设置loading未true
                    regLoading.value = true
                    try {
                        await api.user.signup(regForm)
                        ElMessage.success('注册成功')
                        router.replace('/login').then().catch();
                    } catch (e) {
                        ElMessage.error(e.message || '登录错误')
                    } finally {
                        regLoading.value = false
                    }
                }
            })
        };

        const sendCodeData = reactive({
            sending: false, // 是否在正在发送
            countdown: 0 // 倒计时
        })
        let timer = null
        const startCountDown = (time) => {
            sendCodeData.countdown = time
            if (timer) {
                clearInterval(timer)
            }
            timer = setInterval(() => {
                sendCodeData.countdown--
                if (sendCodeData.countdown == 0) {
                    // 停止倒计时
                    clearInterval(timer)
                    timer = null;
                }
            }, 1000);
            console.log('开始倒计时')
        }
        // 发送验证码
        const sendCode = async () => {
            if (regForm.email) {
                sendCodeData.sending = true
                try {
                    await api.sendCode(regForm.email)
                    // 应该禁用发送操作按钮
                    ElMessage.info('发送验证码成功')
                    startCountDown(60) // 60秒倒计时
                } catch (e) {
                    throw  e;
                    console.log(e)
                } finally {
                    sendCodeData.sending = false
                }
            }
        }
        return {
            regForm, submitForm, rules, form, loginLoading: regLoading, sendCode, sendCodeData
        }
    }
})
</script>
